<template>
  <div v-if="Object.keys(detailShopInfo).length !==0 ">
    <div class="shopFeature">
      <span v-for="(item,index) in (services !== undefined && services.length-1)" :key="index">
        <img :src="services[item-1].icon" />
        {{services[item-1].name}}
      </span>

    </div>
    <div class="shopInfo">
      <div class="shopLogo">
        <div class="shopImg">
          <img
            :src="detailShopInfo.shopLogo"
          />
        </div>
        <span>{{detailShopInfo.name}}</span>
      </div>
      <div class="shopMid">
        <div class="shopMidLeft">
          <ul class="shopSell">
            <li>{{detailShopInfo.cSells | wanUnit}}</li>
            <li>总销量</li>
          </ul>
          <ul class="shopAllGood">
            <li>{{detailShopInfo.cGoods}}</li>
            <li>全部宝贝</li>
          </ul>
        </div>
				<div class="shopMidLine"></div>
				<div class="shopMidToShop">进店逛逛</div>
        <div class="shopMidRight">
          <ul>
            <li v-for="(item,index) in detailShopInfo.score" :key="index">
              <span>{{item.name}}</span>
              <span :class="{getScoreColor:item.isBetter}">{{item.score}}</span>
              <span :class="{getScoreColor:item.isBetter}">{{item.isBetter == true ? "高":"低"}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailShop",
  props: {
    detailShopInfo: {
      type: Object,
      default() {
        return {};
      }
    }
	},
	computed:{
		services(){
			return this.detailShopInfo.services
		}
	}
};
</script>

<style scoped>
.shopFeature {
  display: flex;
  font-size: 12px;
  height: 50px;
  line-height: 50px;
  box-shadow: 0 2px 6px #ccc;
}
.shopFeature > span {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shopFeature > span img {
  height: 14px;
  width: 14px;
  vertical-align: middle;
}
.shopInfo {
	padding: 20px 6px 40px;
  box-shadow: 0 2px 6px #ccc;
}
.shopLogo {
  font-size: 16px;
  line-height: 40px;
  height: 40px;
}
.shopImg {
  width: 40px;
  height: 40px;
  float: left;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}
.shopImg img {
  width: 100%;

  vertical-align: middle;
}
.shopMid{
	position: relative;
	display: flex;
	height: 100px;
}
.shopMidLine{
	position: absolute;
    width: 1px;
    height: 70px;
    background-color: #ccc;
    left: 50%;
    top: 15%
}
.shopMidToShop{
	position: absolute;
	left: 50%;
	top: 90px;
	transform: translateX(-50%);
	font-size: 14px;
	padding: 5px 25px;
	background-color: #c3c3c3;
	border-radius: 15px;

}
.shopMid >div{
	flex: 1;
}
.shopMid .shopMidLeft{
	box-sizing: border-box;
	/* border-right: 1px solid red; */
	display: flex;
	font-size: 14px;
	align-items: center;
	text-align: center;
}
.shopMidLeft >ul{
	flex: 1;
	line-height: 22px;
}
.shopMidLeft >ul li:nth-child(2){
	font-weight: bold;
}
.shopMidRight{
	padding-top: 14px;
	text-align: center;

}
.shopMidRight li{
	font-size: 14px;
	margin-bottom: 12px;
}
.shopMidRight li span{
	margin-right: 10px;
}

.shopMidRight li span:nth-child(2){
	display: inline-block;
	width: 30px;
	text-align: left;
	margin-right: 6px;
	color: green;
}
.shopMidRight li span:nth-child(2).getScoreColor{
	color: red;
}
.shopMidRight li span:nth-child(3){
	padding: 0 2px;
	background-color: green;
	color: white;
}
.shopMidRight li span:nth-child(3).getScoreColor{
	background-color: red;
}
</style>
